<template>
	<view class="padding text-light-black-14">

		<view class="marginTop textblack14">充值金额</view>
		<view class="bg-input-line line padding marginTop">
			<view class="bigEmpty">
				<input v-model="money" class="uni-input input1 " focus placeholder="输入积分" @input="oninput"
					type="number" />
			</view>
			<view class="line padding grayBg">
				<image class="icon-small" src="/static/orangestar.png"></image>
				<text class="textblack18 bold">{{coin}}积分</text>
			</view>
		</view>
		<view class="line marginTop">
			<view :class="{grayBg1:index==1}" class="grayBg padding" @click="click(1)">
				<view class="textBlack18 bold">
					<image class="icon-small" src="../../static/orangestar.png"></image> 50积分
				</view>
				<view class="marginTop">售价 5 元</view>
			</view>
			<view :class="{grayBg1:index==2}" class="grayBg padding marginLeft" @click="click(2)">
				<view class="textBlack18 bold">
					<image class="icon-small" src="../../static/orangestar.png"></image> 211积分
				</view>
				<view class="marginTop">售价 20 元</view>
			</view>
			<view :class="{grayBg1:index==3}" class="grayBg padding marginLeft" @click="click(3)">
				<view class="textBlack18 bold">
					<image class="icon-small" src="../../static/orangestar.png"></image> 1112积分
				</view>
				<view class="marginTop">售价 100 元</view>
			</view>
		</view>
		<view class="bold textblack20 bigMarginTop">说明</view>
		<view class="marginTop">
			单笔最小充值1元;<br />
			充值金额大于等于1元，小于20元时，0.1元/积分；<br />
			充值金额大于等于20元，小于100元时，0.095元/积分；<br />
			充值金额大于等于100元，小于300元时，0.09元/积分；<br />
			充值金额大于等于300元，0.085元/积分；<br />
		</view>
		<view class="lineGray bigMarginTop"></view>
		<view class="bigMarginTop">
			点击立即充值即表示您已同意《积分充值协议》
		</view>

		<button :loading="loading" class="btn-blue-normal margin line textwhite18 " @click="submit">立即充值</button>



		<view class="centerGroup dialogBg" v-show="showDialog">
			<view class="itemGroup dialog-normal padding">
				<view class="centerGroup marginTop">
					请用微信扫描支付
				</view>
				<view class="centerGroup marginTop">
					<canvas canvas-id="qrcode" v-show="showDialog" style="width: 150px;margin: 0 auto;" />
				</view>
				<view class="centerGroup marginTop">
					<view class="centerGroup canle textblack14" @click="canleDialog">取消</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	import request from '/common/request.js';
	export default {
		data() {
			return {
				showDialog: false,
				coin: 20,
				index: 1,
				loading: false,
				money: 5,
				id: 0
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		methods: {

			qrFun: function(text) {
				this.showDialog = true;
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			canleDialog() {
				this.showDialog = false
			},
			click(index) {
				this.index = index;
				switch (index) {

					case 1:
						this.money = 5;
						this.coin = 50;
						break;
					case 2:
						this.money = 20;
						this.coin = 211;
						break;
					case 3:
						this.money = 100;
						this.coin = 1112;
						break;
				}
			},

			oninput(e) {
				console.log(e.detail)
				this.queryData(e.detail.value)
			},
			queryData(num) {

				var temp = 0;
				if (num < 20) {
					temp = num / 0.1
				} else if (num < 100) {
					temp = num / 0.095
				} else if (num < 300) {
					temp = num / 0.09
				} else {
					temp = num / 0.085
				}
				temp = Math.ceil(temp);
				this.coin = temp;
			},
			update() {

				const url = getApp().globalData.apiUrl + "/api/v1/order/" + this.id;
				const that = this;

				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {

						console.log('返回正确回调', res)
						if (res.data.state == 1) {
							that.showDialog = false
							uni.showToast({
								title: "充值成功"
							})
						} else {
							setTimeout(function() {
								that.update();

							}, 2000);
						}

					}, function(err) {
						that.loading = false
						console.log('返回错误回调', err)
						uni.showToast({
							icon: 'err',
							title: err.message
						})
					})

			},

			login() {
				const that = this;
				uni.login({
					success: res => {
						//code值(5分钟失效)
						console.info(res.code);
						//小程序appid
						let appid = 'wx85dd784a1d6ddc9d'; //我瞎写的
						//小程序secret
						let secret = 'e0727eaaaf4a8462d7f1d183383d542e'; //我瞎写的
						const url = getApp().globalData.apiUrl + "/api/v1/user/openId?code=" + res.code;
						//wx接口路径
						uni.request({
							url: url, // 请求路径
							data: {}, // 请求体
							method: 'GET', //请求方法,
							header: '', //请求头
							success: result => {
								//响应成功
								//这里就获取到了openid了
								console.info("openId" + result.data.data);
								// uni.setStorage({
								// 	key:'openId',
								// 	data: result.data.data
								// })
								that.createOrder(result.data.data)
							},
							fail: err => {} //失败
						});
					}
				});

			},

			createOrder(openId) {
				const url = getApp().globalData.apiUrl + "/api/v1/order";
				const that = this;
				that.loading = true;
				request(url, "POST", {
						type: 1,
						money: that.money * 100,
						openId: openId
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.loading = false;
						that.id = res.data.id
						if (openId) {
							uni.requestPayment({
								provider: 'wxpay', //支付类型-固定值
								timeStamp: res.data.payMap.timeStamp, // 时间戳（单位：秒）
								nonceStr: res.data.payMap.nonceStr, // 随机字符串
								package: res.data.payMap.packageVal, // 固定值
								signType: res.data.payMap.signType, //固定值
								paySign: res.data.payMap.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									console.log("支付成功");
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									console.log("支付失败");
								}
							});
						} else {
							that.showDialog = true
							that.qrFun(res.data.payUrl)
						}
						that.update()
					}, function(err) {
						that.loading = false
						console.log('返回错误回调', err)
						uni.showToast({
							icon: 'error',
							title: err.message
						})
					})
			},
			submit() {


				// #ifdef H5
				this.createOrder("")
				// #endif

				// #ifdef MP
				var platform = uni.getSystemInfoSync().platform;
				console.log(platform)
				if (platform == 'ios') {
					uni.showModal({
						title:"由于相关规范，IOS系统(苹果手机)该功能暂不可用!",
						confirmText:"咨询",
						showCancel:false,
						success:function(){
							
							
							uni.openCustomerServiceChat({
								corpId: "ww2fb1f9185008afa3",
								extInfo: {
									url: "https://work.weixin.qq.com/kfid/kfc2fde04b0fa7f99f6"
								},
								success: function(e) {
									console.log('e', e)
								},
								fail: function(err) {
									console.log('err', err)
								}
							})
							
						}
					})
				} else {
					this.login()
				}

				// #endif



			}
		}
	}
</script>

<style>
	@import url("../../common/uni.css");


	.itemGroup {
		border-radius: 15px;
		background-color: #ffffff;
	}

	.centerGroup {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.grayBg {
		border-radius: 20px;
		opacity: 1;
		background: #F0F0F0;

		box-sizing: border-box;

	}

	.grayBg1 {
		box-sizing: border-box;
		border: 1.5px solid #0033FF;
	}
</style>